<template>
  <body id="poster">
    <el-form
      ref="loginForm"
      class="login-container"
      label-position="left"
      label-width="0px"
      :rules="rules"
      :model="loginForm"
    >
      <h3 class="login_title">
        系统登录
        <el-button @click="toRegister" class="re">注册</el-button>
      </h3>
      <el-form-item prop="loginName">
        <el-input
          type="text"
          placeholder="请输入账号"
          clearable
          prefix-icon="el-icon-user"
          v-model="loginForm.loginName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          placeholder="请输入密码"
          clearable
          show-password
          prefix-icon="el-icon-lock"
          v-model="loginForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="radio">
          <el-radio :label="3">用户</el-radio>
          <el-radio :label="2">商家</el-radio>
          <el-radio :label="1">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          type="primary"
          @click="login"
          style="width:100%;background:#505458;border:none"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </body>
</template>


<script>
import axios from 'axios';

export default {
  name: 'LoginForm',
  data() {
    return {
      loginForm: {
        loginName: '',
        password: '',
      },
      radio: 3, // 默认选中用户
      rules: {
      loginName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
      password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    },
    };
  },
  methods: {
    login() {
  this.$refs.loginForm.validate((valid) => {
    if (valid) {
      const postData = {
        loginName: this.loginForm.loginName,
        password: this.loginForm.password,
        role: this.radio,
      };
      axios.post('http://localhost:8080/api/login', postData)
        .then(response => {
          // 处理登录成功的逻辑
          const responseData = response.data;
          if (responseData.success) {
            switch (this.radio) {
              case 3:
                // 用户
                this.$router.push({ path: '/UserOrderPage',query:{userId:responseData.userId}});
                break;
              case 2:
                // 商家
                this.$router.push({ path: '/Businessman',query:{merId:responseData.userId} });
                break;
              case 1:
                // 管理员
                this.$router.push({ path: '/AdminPage',query:{adminId:responseData.userId} });
                break;
              default:
                // 默认情况下，跳转到首页或其他页面
                this.$router.push({ path: '/' });
                break;
            }
          } else {
            this.$message.error(responseData.message);
          }
        })
        .catch(error => {
          // 处理登录失败的逻辑
          console.error(error);
          this.$message.error('登录失败，请重试');
        });
    } else {
      console.log('表单校验失败');
      return false;
    }
  });
},

    toRegister() {
      this.$router.push({ path: '/Register' }); // 跳转到注册页面的逻辑
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },

};
</script>


<style>
    #poster{
        background-position: center;
        height: 100%;
        width:100%;
        background-size:cover;
        position: fixed;
        
    }
    body{
        margin: 0px;
        padding: 0px;
    }
    .login-container{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background-color:#fff ;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;

    }
    .login_title{
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;

    }
    .re{
        background-color: aqua;
    }



</style>